<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#c{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="c" width="1200" height="600"></canvas>

	<script type="text/javascript">
		var ctx = c.getContext('2d');
		c.onmousemove = function () {
			//差值量random
			//event.offsetX(Y)鼠标移动到的位置
			var x = event.offsetX+random(-30,30);//圆形所处的x轴的坐标
			var y = event.offsetY+random(-20,20);//圆形所处的y轴的坐标
			var r = random(10,30);//圆形的半径
			ctx.beginPath();//开始绘制
			ctx.arc(x,y,r,0,Math.PI*2,false);//圆心以及大小定义
			ctx.stroke();
			ctx.closePath();

		}

		function random(min,max) {
			return Math.random()*(max-min)+min;//差量定义的公式
		}
		
	</script>
</body>
</html>